<template>
  <div class="classify-contian">
    <van-sticky>
      <van-search v-model="value" placeholder="请输入搜索关键词" @focus="$router.push('/search')" />
    </van-sticky>

    <div class="box">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in classifyList"
            :key="item.id"
            :title="item.title"
            @click="clickhandler($event, item.id)"
          />
        </van-sidebar>
      </div>

      <div class="list">
        <img v-if="classify.img_url" :src="classify.img_url" />
        <van-empty
          v-if="goodsList.length === 0"
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无商品"
        />
        <van-card
          v-for="item in goodsList"
          :key="item.id"
          num="2"
          :price="item.sell_price + '.00'"
          :origin-price="item.market_price"
          :title="item.title"
          :thumb="item.thumb_path"
          @click="$router.push(`/particulars/${item.id}`)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCategory, getCategoryGoods } from "@/api";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      classifyList: [],
      classify: {},
      goodsList: [],
    };
  },
  methods: {
    clickhandler(index, id) {
      // 防止多次点击同一个分类，发多次请求
      // console.log(this.classify.id, id);
      if (this.classify.id === id) {
        return;
      }
      this.classify = this.classifyList[index];
      this.getCategoryGoods();
    },
    async getCategory() {
      let data = await getCategory();
      this.classifyList = data;
      this.classify = data[0];
    },
    async getCategoryGoods() {
      let data = await getCategoryGoods(this.classify.id);
      this.goodsList = data;
    },
  },
  async mounted() {
    //await 等待分类请求成功返回后再发分类商品请求
    await this.getCategory();
    this.getCategoryGoods();
  },
};
</script>

<style lang="scss" scoped>
.classify-contian {
  .box {
    display: flex;
    justify-content: space-between;
    background: #fff;

    .left {
      width: 80px;
      height: 100vh;
    }

    .list {
      display: flex;
      flex: 1;
      flex-direction: column;
      height: 100vh;
      overflow: auto;

      img {
        width: 255px;
        height: 76px;
        margin: 0 auto;
      }

      .van-card__price {
        color: orange;
      }
    }
  }
}
</style>
